<script setup name="home">
import * as echarts from 'echarts';
import OAMain from "@/components/OAMain.vue";
import {onMounted, ref} from "vue";
import homeHttp from "@/api/homeHttp.js";
import {ElMessage} from "element-plus";
import datetimeFormat from "../../utils/datetimeFormat.js";

let informs = ref([])
let absents = ref([])
onMounted(async () => {
  // 获取各部门员工数量
  try {
    let rows = await homeHttp.getDepartmentStaffCount();
    rows = rows.data
    let xdatas = []
    let ydatas = []
    for (let row of rows) {
      xdatas.push(row.name)
      ydatas.push(row.staff_count)
    }
    var department_staff_count = echarts.init(document.getElementById('department_staff_count'));
    department_staff_count.setOption({
      tooltip: {},
      xAxis: {
        data: xdatas,
      },
      yAxis: {},
      series: [
        {
          name: '部门员工数量',
          type: 'bar',
          data: ydatas,
        }
      ]
    });
  } catch (error) {
    ElMessage.error("获取部门员工信息数量错误" + error);
  }
  try {
    const informdata = await homeHttp.getLatesInforms()
    informs.value = informdata.data
  } catch (error) {
    ElMessage.error("获取最近十条通知信息错误" + error);
  }
  try {
    const absentsdata = await homeHttp.getLatesAbsents()
    absents.value = absentsdata.data
  } catch (error) {
    ElMessage.error("获取最近十条考勤信息错误" + error);
  }
})
</script>

<template>
  <OAMain title="首页">
    <el-card>
      <template #header>
        <h2>部门员工数量</h2>
      </template>
      <div id="department_staff_count" style="width: 100%;height:400px;"></div>
    </el-card>
    <el-row>
      <el-col :span="12">
        <el-card>
          <template #header>
            最新通知
          </template>
          <el-table :data="informs">
            <el-table-column label="标题">
              <template #default="scope">
                <router-link :to="{name: 'inform_detail', params: {pk: scope.row.id}}">
                  {{ scope.row.title }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column label="发布者" prop="author.realname"/>
            <el-table-column label="发布时间">
              <template #default="scope">
                {{ datetimeFormat.stringFromDateTime(scope.row.create_time) }}
              </template>
            </el-table-column>
            <el-table-column label="是否已读">
              <template #default="scope">
                <el-tag v-if="scope.row.reads.length>0">已读</el-tag>
                <el-tag v-else type="danger">未读</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            最新请假
          </template>
          <el-table :data="absents">
            <el-table-column label="部门" prop="requester.department.name"/>
            <el-table-column label="发起人" prop="requester.realname"/>
            <el-table-column label="起始时间" prop="start_date"/>
            <el-table-column label="结束时间" prop="end_date"/>
            <el-table-column label="发起时间">
              <template #default="scope">
                {{ datetimeFormat.stringFromDateTime(scope.row.create_time) }}
              </template>
            </el-table-column>

          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </OAMain>
</template>

<style scoped>

</style>